<ion-header>
  <ion-toolbar>
    <ion-buttons left>
      <button *ngIf="!showButton" ion-button icon-left (click)="navBack()">
        <ion-icon class="nav-back" name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>

    <ion-title>{{"scanBarCode" | translate}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item text-wrap class="scan scanspace">
    {{"tiptoFindBarcode" | translate}}：
  </ion-item>
  <ion-row>
    <ion-col col-4 style="padding-top: 20px;">
      <div class="scan">{{"deviceID" | translate}}：</div>
    </ion-col>
    <ion-col col-5 style="padding-top: 20px;">
      <input style="width: 100%;color: black;" disabled=true [(ngModel)]="scannedCode" placeholder="{{'deviceID' | translate}}" />
    </ion-col>
    <ion-col>
      <button class="scan" ion-button icon-only [disabled]=this.rest.viewOnly (click)=scanCode()>
        <ion-icon name="qr-scanner"></ion-icon>
      </button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col col-4 style="padding-top: 20px;">
      <div class="scan">{{"nickName" | translate}}：</div>
    </ion-col>
    <ion-col col-5 style="padding-top: 20px;">
      <input style="width: 100%;color: black;" [disabled]=this.rest.viewOnly [(ngModel)]="deviceName" placeholder="{{'deviceTitle' | translate}}" />
    </ion-col>
  </ion-row>
  <button ion-button full color="light" [disabled]=this.rest.viewOnly (click)=nextStep()>
    <ion-label color="hushitong">{{"next" | translate}}</ion-label>
  </button>
  <button *ngIf="showButton" ion-button full color="light" (click)=validateCheckin()>
    <ion-label color="hushitong">{{"skip" | translate}}</ion-label>
  </button>
</ion-content>
